
<div class="sidebar" id="sidebar" style="width:{{sidebar_width}};">
    <div class="dragHandleTB" id="dragHandleT"></div>
    <div class="sidebar-header" id="sidebar-header" data-content="panel_head_home">
        <input type="text" id="searchInputSB" placeholder="Search..." autocomplete="off">
        <span class="clearIcon">&times;</span>
        <span class="searchCategoryIcon" title="Category Only">C</span>
    </div>
    <div id="sidebar_views">
        <div class="view_button right" id="switch_settings" data-tooltip="Settings">⚙</div>
        <div class="view_button right" id="switch_sidebar" data-tooltip="Toggle Sidebar"><i class="pi pi-bars"></i></div> 

        <div class="view_button right" id="switch_home" data-content="home" data-tooltip="Home"><i class="pi pi-home"></i></div>
        <div class="view_button" id="official_button"></div>
        
    </div>
    <div class="content_sidebar" id="panel_home" data-expanded="false" data-content="panel_content_home">
        <div id="spacer"></div>
        <label class="sb_label" id="sb_label_pinned">PINNED</label>
        <ul id="sidebarBookmarks"></ul>
        <label class="sb_label" id="sb_label_custom">CUSTOM NODES<button class="expand_node left" data-tooltip="Expand/Collapse">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" enable-background="new 0 0 52 52"
                    xml:space="preserve">
                    <path
                        d="M48,9.5C48,8.7,47.3,8,46.5,8h-41C4.7,8,4,8.7,4,9.5v3C4,13.3,4.7,14,5.5,14h41c0.8,0,1.5-0.7,1.5-1.5V9.5z" />
                    <path d="M48,39.5c0-0.8-0.7-1.5-1.5-1.5h-41C4.7,38,4,38.7,4,39.5v3C4,43.3,4.7,44,5.5,44h41c0.8,0,1.5-0.7,1.5-1.5
                        V39.5z" />
                    <path d="M30,29h4.5c0.8,0,1.5-0.7,1.5-1.5v-3c0-0.8-0.7-1.5-1.5-1.5H30c-0.6,0-1-0.4-1-1v-4.5c0-0.8-0.7-1.5-1.5-1.5
                        h-3c-0.8,0-1.5,0.7-1.5,1.5V22c0,0.6-0.4,1-1,1h-4.5c-0.8,0-1.5,0.7-1.5,1.5v3c0,0.8,0.7,1.5,1.5,1.5H22c0.6,0,1,0.4,1,1v4.5
                        c0,0.8,0.7,1.5,1.5,1.5h3c0.8,0,1.5-0.7,1.5-1.5V30C29,29.4,29.4,29,30,29z" />
                    <rect class="expand_node" style="opacity:0" x="0" y="0" width="52" height="52" />
                </svg>
            </button></label>
        <ul id="sidebarCustomNodes"></ul>
    </div>

    
    <div class="dragHandle" id="dragHandle"></div>
    <div id="previewDiv"></div>

    <!-- settings -->
    <div id="sb-modal-backdrop-settings" class="sb-modal-backdrop-settings sb_hidden"></div>
    <div id="sb_settingsDiv_export"  class="sb_hidden">
        <h1>Export Settings</h1>
        <div class="setting"><label>Pinned Nodes</label><input type="checkbox" checked></div>
        <div class="setting"><label>Custom Categories</label><input type="checkbox" checked></div>
        <div class="setting"><label>Workflows Categories</label><input type="checkbox" checked></div>
        <div class="setting"><label>Templates Categories</label><input type="checkbox" checked></div>
        <div class="setting"><label>CivitAI API KEY</label><input type="checkbox" checked></div>
        <div class="setting"><label>Model Templates</label><input type="checkbox" checked></div>
        <div class="setting"><label>Other Settings</label><input type="checkbox" checked></div>
        <div id="sb_buttonsContainer"><button id="sb_runExportButton">Export</button></div>
        
        
    </div>
    <div id="sb_settingsDiv_import"  class="sb_hidden">
        <h1>Import Settings</h1>
        <div class="setting"><label>Pinned Nodes</label><input type="checkbox" checked></div>
        <div class="setting"><label>Custom Categories</label><input type="checkbox" checked></div>
        <div class="setting"><label>Workflows Categories</label><input type="checkbox" checked></div>
        <div class="setting"><label>Templates Categories</label><input type="checkbox" checked></div>
        <div class="setting"><label>CivitAI API KEY</label><input type="checkbox" checked></div>
        <div class="setting"><label>Model Templates</label><input type="checkbox" checked></div>
        <div class="setting"><label>Other Settings</label><input type="checkbox" checked></div>
        <div id="sb_buttonsContainer">
            <button id="sb_selectFileButton">Select File</button>
            <input type="file" id="importFileInput" style="display: none;">
            <button id="sb_runImportButton">Import</button>
        </div>
    </div>

    <div id="sb_settingsDiv_shortcut"  class="sb_hidden">
        <h1>Shortcut Settings</h1>

        <div  class="setting">
            <label>Show/hide Sidebar (<span class="current-shortcut" data-action="action1"></span>)</label>
            <input type="text" class="sb-shortcut" data-action="action1" placeholder="Press Ctrl/Alt/Shift + Letter/Number" readonly>
            
        </div>
    
        <div  class="setting">
            <label>Quick Search (<span class="current-shortcut" data-action="action2"></span>) </label>
            <input type="text" class="sb-shortcut" data-action="action2" placeholder="Press Ctrl/Alt/Shift + Letter/Number" readonly>
          
        </div>
        
        <div class="setting">
            <label>Open Settings (<span class="current-shortcut" data-action="action3"></span>)</label>
            <input type="text" class="sb-shortcut" data-action="action3" placeholder="Press Ctrl/Alt/Shift + Letter/Number" readonly>
            
        </div>
    

        <div id="sb_buttonsContainer">
            <button id="sb_saveAllShortcuts">Save Shortcuts</button>
            <button id="sb_resetToDefault">Reset to Default</button>  
        </div>
    </div>
    <style>
        #g_section, #w_section, #t_section, #m_section {
            margin-top: 3vh;
            height: auto;
            background: var(--bg-color);
           
        }

        #g_section h3, #w_section h3, #t_section h3, #m_section h3 {
            font-size: 12px;
            line-height: 27px;
            font-weight: 600;
            text-align: center;
            color: var(--content-fg);
            border-bottom: 2px solid var(--border-color);
        }
    </style>
    
    <div id="sb_settingsDiv" class="sb_hidden">

        <div id="tabContainer" class="n-sb-tab-container">
            <div id="tabSettings" class="n-sb-tab n-sb-active">SideBar Settings</div>
            <div id="tabCustomize" class="n-sb-tab">Customize</div>
        </div>

        <!-- SideBar Settings Content -->
        <div id="settingsContainer" class="n-sb-tab-content n-sb-active">

            <div id="sb_buttonsContainer">
                <button id="sb_resetButton">Soft Reset</button>
                <button id="sb_factoryResetButton">Factory Reset</button>
                <button id="sb_exportButton">Export Config</button>
                <button id="sb_importButton">Import Config</button>
                <button id="sb_shortcutButton">Shortcuts</button>
            </div>
            <div id="g_section"><h3>General Settings</h3></div>
            <div id="w_section"><h3>Workflow Panel</h3></div>
            <div id="m_section"><h3>Assets Downloader Panel</h3></div>
            
            
        
        </div>

        <!-- Customize Content -->
        <div id="sbCustomizeContainer" class="n-sb-tab-content">
        <center style="color:red">NOTE: THIS SECTION IS UNDER DEVELOPMENT, PLEASE USE AT YOUR OWN RISK.</center>
            <div id="n-sb-section-list">
                <!-- Le sezioni verranno inserite qui dinamicamente -->
            </div>
            <div id="sb_buttonsContainerCustomize">
            <button id="add-section-btn">Add Section</button>
            <button id="save-btn">Save Layout</button>
            <button id="restore-btn">Restore Layout</button>
            </div>
            <!-- Add your customize settings UI here -->
        </div>
    </div>
    <!-- end settings -->

    <a href="#" id="sb_scrollToTopButton">
        <svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve">
            <path id="XMLID_224_"
                d="M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394
	l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393
	C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z" />
        </svg>
    </a>
    <div id="customMenu" class="custom-menu">
        <ul> </ul>
    </div>
    <div class="dragHandleTB" id="dragHandleV"></div>
</div>